<template>
<section>
    <div id="maincon">
        <header>
            <span>
                <!-- <router-link to="/maincon"></router-link> -->
                <a href="#"><i class="logo"></i></a>
                <router-link to=""><i class="login">登录</i></router-link>
                <router-link to=""><i class="cart"></i></router-link>       
            </span>
        </header>
        <div class="nav-choose">
            <span class="choose-left"><router-link to="/classfiy">商品分类<i class="choose">选择</i></router-link></span>
            <span class="choose-right"><router-link to="/treasure">镇店之宝</router-link></span>
        </div>
        <div class="nav-search">
            <form action="">
                <div class="search-left">
                    <input type="text" class="input-left" placeholder="搜索" aria-label="" data-aria-clear-label="" name="k" autocomplete="off" autocorrect="off" autocapitalize="off" dir="auto" value="" id="nav-search-keywords">
                </div>
                <div class="search-right">
                    <input type="submit" class="input-right" value="" aria-label="搜索">
                    <i class="nav-submit"></i>
                </div>
            </form>
        </div>
        <!-- 轮播图 -->
        <div class="lunbo">
            <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../assets/images/swipe01_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe02_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe03_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe03_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe04_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe05_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe06_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe01_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe07_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe08_.jpg" alt=""></mt-swipe-item>
            </mt-swipe>
        </div>
        <!-- 选择介绍 -->
        <div class="con">
            <div class="con-header">
                <router-link to=""><span><i>亚马逊</i><i class="cgcolor">海外购</i></span><span>限时全场满额包邮</span><span>Prime会员0门槛包邮&nbsp;*</span></router-link>
            </div>
            <div class="con-bottom">
                <div class="con-bottom1">
                     <!-- <img src="../../assets/images/shop1.jpg" class="bottom-img1" alt=""> -->
                    <ul>
                        <li><router-link to="/kindleshop"></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                    </ul>
                </div>
                <div class="con-bottom2">
                    <ul>
                        <!-- <img src="../../assets/images/shop2.jpg" class="bottom-img2" alt=""> -->
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 广告位 -->
        <div class="advertising">
            <div class="advertising1"><img src="../../assets/images/bg.jpg" alt=""></div>
            <div class="advertising2"><img src="../../assets/images/bg2.jpg" alt=""></div>
        </div>
    </div>
    <router-view></router-view>
</section>    
</template>
<style>
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
}
a:hover{
    text-decoration: none;;
}
/* ----------------------header----------------------------------------- */
header{
    /* width: 100%; */
    min-height: 44px;
    background:url("../../assets/images/basic-logo.png") 0px -1160px;
    position: relative;
}
.logo{
    width: 100px;
    height: 55px;
    background:url("../../assets/images/basic-logo.png")no-repeat -20px -400px;
    position:absolute;
    top: -5px;
    left: 0px;
    transform:scale( 0.5);
}
.login{
    position: absolute;
    top:15px;
    right: 60px;
    font-style: normal;
    color: #0066c0;
}
.cart{
    width: 65px;
    height: 45px;
    background:url("../../assets/images/basic-logo.png")no-repeat -259px -679px;
    position:absolute;
    top: 0px;
    right: 5px;
    transform:scale( 0.5);
}
/* --------------------nav选择-------------------------------- */
.nav-choose{
    width: 100%;
    min-height: 44px;
    background:url("../../assets/images/basic-logo.png") 0px -1060px;
    position: relative;
}
.nav-choose a{
    color: #666;   
    font-size: 13px;
   font-weight: 700;
}
.choose-left,.choose-right{
   position:absolute;
   bottom: 5px;
   background: transparent;
   left: 15px;
}
.choose-right{
   left: 80px; 
}
.choose{
    position: absolute;
    top: -15px;
    left: 0px;
    font-size:12px;
    font-weight: 300;
    font-style: normal;
}
/* ------------------------搜索---------------------------------- */
.nav-search{
    width:100%;
    min-height: 44px;
    background:url("../../assets/images/basic-logo.png") 0px -1260px;
    position: relative;   
}
.input-left{
    width:80%;
    position: absolute;
    min-height: 32px;
    top: 7px;
    left: 15px;
    background: white; 
}
.input-right{
    width: 35px;
    height: 35px;
    background:#5b626a;
    position: absolute;
    right: 20px;
    top: 7px;
    
}
.nav-submit{
    position: absolute;
    right: 20px;
    top: 7px;
    width: 35px;
    height: 35px;
     transform:scale( 0.45);
    background:url("../../assets/images/basic-logo.png")no-repeat -80px -580px;
}
/* ----------------轮播图---------------------------------- */
.lunbo{
    height: 145px;
}
.lunbo .is-active{
    background: white;
}
.lunbo img{
    width: 100%;
    height: 150px;
}
/* ----------------------分店选择-------------------------- */
.con{
    border-bottom: 2px solid #cdcdcd;
    border-top: 5px solid #cdcdcd;
    background: white;
}
.con-header{
    min-height: 33px;
    text-align: center;
    padding-top:5px;
}
.con-header span{
    display: inline;
    margin-right: 15px;
    color:  rgb(85, 85, 85);
    font-size: 12px;
    
}
.con-header span>i{
    font-weight:bold;
    font-size: 14px;
    font-style: normal;
}
.con-header .cgcolor{
    color: #0066c0;
}
/* 图片 */
.con-bottom1 ul{
    justify-content:center;
    display: flex;
    height: 100px; 
    background: url('../../assets/images/shop1.jpg') no-repeat center/cover;
}
.con-bottom2 ul{
    justify-content:center;
    display: flex; 
    height: 100px;
    background: url('../../assets/images/shop2.jpg') no-repeat center/cover;
}

.con-bottom a{
    display: block;
    height: 100px;
}
.con-bottom ul>li{
    width: 20%;   
}

/* -----------------广告位置--------------------------------------------- */
.advertising img{
    width: 100%;
}
.advertising1,.advertising2{
    min-height: 65px;
    border-bottom: 2px solid #cdcdcd;
}
.advertising2{
    min-height: 150px;
}

</style>